<template>
  <view v-if="goods_info.goods_name" class="goods-detail-container">
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(item, i) in goods_info.pics" :key="i">
        <image :src="item.pics_url" @click="preview(i)" style="width: 100%; height: 100%;"></image>
      </swiper-item>
    </swiper>

    <!-- 商品信息区域 -->
    <view class="goods-info-box">
      <!-- 商品价格 -->
      <view class="goods-price">
        <text class="goods-price-icon">￥</text>
        <text class="goods-price-number">{{goods_info.goods_price}}</text>
      </view>
      <!-- 商品信息主体区域 -->
      <view class="goods-info-body">
        <!-- 商品的名字 -->
        <view class="goods-name">{{goods_info.goods_name}}</view>
        <!-- 收藏 -->
        <view class="favi">
          <uni-icons type="star" size="18" color="gray"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <!-- 运费和销量 -->
      <view class="goods-info-bottom">
        <view class="freight">快递：免运费</view>
        <view class="goods-sales-volume">{{goods_info.goods_sales_volume}}人购买</view>
      </view>
    </view>
    <!-- 商品详情 -->
    <view class="goods-info-detail">
      <text>————</text>
      商品详情
      <text>————</text>
    </view>
    <rich-text :nodes="repairRichText(goods_info.goods_introduce)"></rich-text>
    <!-- 返回顶部按钮 -->
    <view class="topping-icon" v-show="showTopBtn" @click="scrollToTop">
      <image src="../../static/stop_imgs/topping.png"></image>
      <view class="topping-icon-text">顶部</view>
    </view>
    <!-- 商品导航组件区域 -->
    <view class="goods_nav">
      <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
        @buttonClick="buttonClick" />
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    computed: {
      ...mapState('m_cart', []),
      ...mapGetters('m_cart', ['total']),
    },
    watch: {
      // 监听 total 值的变化，通过第一个形参得到变化后的新值
      total: {
        handler(newVal) {
          // 过数组的 find() 方法，找到购物车按钮的配置对象
          const findResult = this.options.find((x) => x.text === '购物车')
          if (findResult) {
            // 动态为购物车按钮的 info 属性赋值
            findResult.info = newVal
          }
        },
        // immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
        immediate: true
      }
    },
    data() {
      return {
        // 置顶按钮显示隐藏标志
        showTopBtn: false,
        // 商品详情对象
        goods_info: {},
        options: [{
          icon: 'shop',
          text: '店铺',
          infoBackgroundColor: '#007aff',
          infoColor: "red"
        }, {
          icon: 'headphones',
          text: '客服'
        }, {
          icon: 'cart',
          text: '购物车',
          infoBackgroundColor: 'orangered',
          info: 0
        }],
        buttonGroup: [{
          text: '加入购物车',
          backgroundColor: 'orangered',
          backgroundColor: '#fba007',
          color: '#fff'
        }, {
          text: '立即购买',
          backgroundColor: 'orangered',
          color: '#fff'
        }]
      }
    },


    onLoad(options) {
      const goods_id = options.goods_id
      this.getGoodsDetail(goods_id)
    },
    // 监听页面滚动事件
    onPageScroll(e) {
      if (e.scrollTop > 476) {
        this.showTopBtn = true
      } else {
        this.showTopBtn = false
      }
    },
    methods: {
      // 把 m_cart 模块中的 updateUserCartList 方法映射到当前页面使用
      ...mapMutations('m_cart', ['updateUserCartList']),
      async getGoodsDetail(goods_id) {
        const {
          data: res
        } = await uni.$http.get('/api/stop/goodsInfo', {
          goods_id
        })
        if (res.meta.status !== 200) return uni.$showMsg()
        this.goods_info = res.message
      },
      // 实现轮播图的预览效果
      preview(i) {
        // 调用 uni.previewImage() 方法预览图片
        uni.previewImage({
          // 预览时，默认显示图片的索引
          current: i,
          // 所有图片 url 地址的数组
          urls: this.goods_info.pics.map(x => x.pics_big)
        })
      },
      //修改富文本内容适应小程序界面
      repairRichText(content) {
        // 找到图片标签并修改其样式
        content = content.replace(/<img[^>]+>/gi, function(match) {
          // 添加 style 属性并设置样式
          match = match.replace(/style\s*=\s*['"]/,
            'style="width: 100%; max-width: 100%; display:block;vertical-align:middle;');
          // 移除底部白边间隙
          match = match.replace(/\s*\/>/,
            ' style="width: 100%; max-width: 100%; display:block;vertical-align:middle;" />');
          // 将图片webp格式改成jpg格式解决 ios 系统无法显示图片的问题
          match = match.replace(/webp/g, 'jpg');
          return match;
        });
        return content;
      },
      // 商品导航组件点击事件
      onClick(e) {
        if (e.content.text === '购物车') {
          uni.navigateTo({
            url: '/subpkg/stop_cart/stop_cart'
          })
        }
        if (e.content.text === '店铺') {
          return uni.$showMsg('暂无店铺加盟！')
        }
        if (e.content.text === '客服') {
          return uni.$showMsg('暂无客服！')
        }
      },
      async buttonClick(e) {
        // 判断是否点击了 加入购物车 按钮
        if (e.content.text === '加入购物车') {
          // 组织应该商品的信息对象
          // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
          // 准备参数
          var token = uni.getStorageSync('token')
          const goods = {
            goods_id: this.goods_info.goods_id, // 商品的Id
            goods_name: this.goods_info.goods_name, // 商品的名称
            goods_price: this.goods_info.goods_price, // 商品的价格
            goods_count: 1, // 商品的数量
            goods_small_logo: this.goods_info.goods_small_logo, // 商品的图片
            goods_state: true // 商品的勾选状态
          }
          const query = {
            token,
            goods,
          }
          const {
            data: res
          } = await uni.$http.post('/api/update/cart', query)
          if (res.meta.status !== 200) return uni.$showMsg('更新购物车失败')
          this.updateUserCartList(res.message)
        }
      },
      // 点击置顶按钮回到顶部事件
      scrollToTop() {
        if (this.showTopBtn === true) {
          uni.pageScrollTo({
            scrollTop: 0,
            duration: 0
          })
        }
      },
    }
  }
</script>

<style lang="scss">
  .goods-detail-container {
    padding-bottom: 50px;
    background-color: white;
  }

  // 轮播图
  swiper {
    height: 750rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  // 商品信息
  .goods-info-box {
    padding: 10px;
    padding-right: 0;

    .goods-price {
      position: relative;
      margin-bottom: 4px;

      .goods-price-icon {
        bottom: -3px;
        position: relative;
        color: orangered;
        font-size: 10pt;
      }

      .goods-price-number {
        position: absolute;
        left: 11px;
        font-size: 14pt;
        font-weight: bold;
        color: orangered;
      }
    }

    .goods-info-body {
      display: flex;
      justify-content: space-between;

      .goods-name {
        font-size: 13px;
        margin-right: 8px;
        margin-left: 2px;
      }

      .favi {
        width: 80px;
        font-size: 11px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #efefef;
        color: gray;
      }
    }

    .goods-info-bottom {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: gray;
      margin: 6px 0 0 2px;

      .freight {
        font-size: 12px;
        color: gray;
      }

      .goods-sales-volume {
        margin-right: 85px;
      }
    }
  }

  .goods-info-detail {
    // width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-top: 6px solid #f0f0f0;
    border-bottom: 2px solid #f0f0f0;
    background-color: whitesmoke;
    color: gray;
    font-size: 13px;

    text {
      color: #f0f0f0;
      padding-right: 8px;
      padding-left: 8px;
    }
  }

  .topping-icon {
    width: 42px;
    height: 42px;
    position: sticky;
    bottom: 100px;
    z-index: 999;
    border: 1px solid #ccc;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    float: right;
    margin-right: 6px;

    image {
      width: 18px;
      height: 18px;
    }

    .topping-icon-text {
      margin-top: 2px;
      font-size: 10px;
      color: #8a8a8a;
    }
  }

  // 商品导航组件
  .goods_nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
</style>